<page-header [autoTitle]="false"></page-header>
<nz-card>
  <div style="text-align: center;margin-bottom: 20px;">
    操作说明：1、拖动图A到图B位置即交换活动A与活动B的顺序，也即为小程序首页显示的布局效果；<br/>
    2、除顶部三个活动可以是任一类型活动，其他活动不同类型则不能交换位置<br/>
    3、除顶部三个活动，此页面其他类型活动只显示上线状态的活动&nbsp;&nbsp;&nbsp;&nbsp;
  </div>
  <div class="main">
    <div style="overflow: hidden;" dragsortinstruct-directive>
      <ng-container  *ngFor="let typeVo of typeVoList; let n = index;">
        <!--顶部活动样式特殊处理-->
        <div class="top" *ngIf="n == 0 ">
          <div class="top-item">
            <ng-container *ngFor="let company of typeVo.companyList;let i = index;" >
              <div style="background-color: hotpink;">
                <img src="{{company.mainImg}}"  (mousedown)="imgmousedown($event,typeVo,company)"  (mouseup)="imgmouseup(typeVo,company)" class="dsimg" alt="">
                <div class="txt-size"><span *ngIf=" i == 0">建议上传大小375*500的活动主图</span><span *ngIf=" i != 0">建议上传大小375*250的活动主图</span></div>
                <div class="txt" [title]="company.title">{{company.title | stringEllipsisCutPipe:10}}<span *ngIf="company.inActivity == 2" style="color: red;font-weight: 800">(活动已下线,请及时更换合适的活动)</span></div>
              </div>
            </ng-container>
          </div>
        </div>
        <!--其他分类活动样式-->
        <div class="recommend" *ngIf="n > 0 && typeVo.companyList.length > 0">
          <h2><span>/</span>{{typeVo.name}}<span>/</span></h2>
          <div class="recom-xq">
            <ng-container *ngFor="let company of typeVo.companyList;let i = index;" >
              <section [ngClass]="{'img-big': i == 0}">
                <div style="position: relative;">
                  <img src="{{company.mainImg}}" (mousedown)="imgmousedown($event,typeVo,company)"  (mouseup)="imgmouseup(typeVo,company)" class="dsimg">
                  <div class="txt-size" style="top: 0px;"><span *ngIf=" i == 0">建议上传大小750*350的活动主图</span><span *ngIf=" i != 0">建议上传大小350*400的活动主图</span></div>
                </div>
                <p [title]="company.title">{{company.title | stringEllipsisCutPipe:10}}</p>
              </section>
            </ng-container>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</nz-card>
